<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>支付页面</title>
		<link rel="stylesheet" type="text/css" href="css/bottom.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/header_jsstyle.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/zhifu.css"/>
		<link rel="shortcut icon" href="favicon.ico"/>
		<style type="text/css">
			.w{
				width: 990px;
			}
		</style>
		<script type="text/javascript" src="js/cookie.js" ></script>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript" src="js/js.js" ></script>
	</head>
	<body>
		<div id="header"></div>
		<div id="window_right"></div>
		<script>
			$("#header").load("header.html")
			window_r();
			$(function(){
			//header-top-left
			$("#header").on("mouseover",".header_top .top_left .lp .span",function(){
				$(this).find(".dress").show();
			})
			$("#header").on("mouseout",".header_top .top_left .lp .span",function(){
				$(this).find(".dress").hide();
			})
			//用户
			if(getCookie("login")){
				var str = "";
				var name = getCookie("name");
				str += ' <p class="yonghu"> <a class="ming" href="#">'+name+'</a> <a class="tuichu" href="login.html"> 退出 </a></p>'
				$("#header").find(".header_top .top_left .login").replaceWith(str);
			}
			//header-top-right
			$("#header").on("mouseover",".header_top .top_right li.tab",function(){
				$(this).find(".show").show();
			})
			$("#header").on("mouseout",".header_top .top_right li.tab",function(){
				$(this).find(".show").hide();
			})
		})
		</script>
		<div id="content">
			<div class="w">
				<div class="content_top">
					<h1 class="l"><a href="index.html"><img src="img/logo.jpg" /></a></h1>
					<ul class="l">
						<li class="l">
							<p class="p1">查看购物车</p>
							<span class="p2 one"></span>
						</li>
						<li class="l">
							<p class="p1">拍下商品</p>
							<span class="p2 two"></span>
						</li>
						<li class="l">
							<p class="p1">付款</p>
							<span class="p2 z three">3</span>
						</li>
						<li class="l">
							<p class="p1">确认收货</p>
							<span class="p2 z four">4</span>
						</li>
						<li class="l">
							<p class="p1">评价</p>
							<span class="p2 five">5</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="content_down">
				<div class="w">
					<div class="yi bor-top">
						<h3>1地址选择</h3>
						<div class="dress">
							<dl>
								<dt class="l"><span>*</span>收件人</dt>
								<dd class="l name"><input type="text" /></dd>
							</dl>
							<dl>
								<dt class="l"><span>*</span>所在地区</dt>
								<dd class="l"><input type="text" /></dd>
							</dl>
							<dl>
								<dt class="l"><span>*</span>街道地址</dt>
								<dd class="l tong"><input type="text" /></dd>
							</dl>
							<dl>
								<dt class="l">电子邮箱</dt>
								<dd class="l tong"><input type="text" /></dd>
							</dl>
							<dl>
								<dt class="l">编码</dt>
								<dd class="l bian"><input type="text" /></dd>
							</dl>
							<dl>
								<dt class="l"><span>*</span>手机号</dt>
								<dd class="l phone"><input type="text" /></dd>
								<dt class="l">或固定电话</dt>
								<dd class="l call"><input type="text" />-<input type="text" />-<input type="text" /></dd>
							</dl>
							<p>两者至少填一项</p>
							<div class="queren">
								确定
							</div>
						</div>
					</div>
					<div class="er bor-top">
						<h3>2 送货时间 <span>送货时间仅供参考，快递公司会尽量满足您的要求</span></h3>
						<ul class="day">
							<li class="l"><label><input type="radio" name="day"/>仅工作日送货</label></li>
							<li class="l"><label><input type="radio" name="day"/>仅周末送货</label></li>
							<li class="l"><label><input type="radio" name="day"/>工作日/周末/假日均可</label></li>
							<li class="l"><label><input type="radio" name="day"/>指定送货时间</label></li>
						</ul>
					</div>
					<div class="san bor-top">
						<h3>3 商品清单</h3>
						<div class="three">
							<ul class="daohang">
								<li class="l s">商品</li>
								<li class="l sh">数量</li>
								<li class="l dan">单价</li>
								<li class="l xiao">小计</li>
							</ul>
							<ul class="a1">
								
							</ul>
						</div>
					</div>
					<div class="allmoney">
						<p class="sjia">商品总价: <span></span></p>
						<p class="yjia">应付款金额: <span></span></p>
					</div>
					<div class="si bor-top">
						<h3>4 支付方式</h3>
						<ul class="xuan_fu"> 
							<li class="bank">
								<label><input type="radio" class="wai_fang" name="wai_fang" />支付宝网银直连</label>
								<ul>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/10.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/1.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/11.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/12.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/2.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/3.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/4.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/5.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/6.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/7.gif"/></label></li>	
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/8.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/17.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/18.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/19.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/20.gif"/></label></li>
									<li class="l"><label><input type="radio" name="bank"/><img src="img/yinhang_img/21.gif"/></label></li>
								</ul>
							</li>
							<li class="daofu">
								<label><input type="radio" class="wai_fang" name="wai_fang"/>货到付款</label>
								<ul><li></li></ul>
							</li>
							<li class="alipay">
								<label><input type="radio" class="wai_fang" name="wai_fang"/>支付宝/快钱/财付通/其他支付</label>
								<ul>
									<li class="l"><label><input type="radio" name="alip"/><img src="img/yinhang_img/pay_alipay.gif"/></label></li>
									<li class="l"><label><input type="radio" name="alip"/><img src="img/yinhang_img/pay_ChinaPay.gif"/></label></li>
									<li class="l"><label><input type="radio" name="alip"/><img src="img/yinhang_img/pay_weixin.gif"/></label></li>
								</ul>
							</li>
						</ul>
					</div>
					<div class="zhifu_bottom">
						<a class="l left" href="gwc.html">返回修改购物车</a>
						<a class="r right" href="javascript:;">确认订单</a>
					</div>
				</div>
			</div>
		</div>	
		<script>
		$(function(){
			$(".day li").click(function(){
				$(this).css({"border":"1px solid green","background":"#e6f6de"}).siblings().css({"border":"1px solid #ccc","background":"#fff"})
			})
			$(".xuan_fu>li").click(function(){
				var $radio = $(this).find(".wai_fang")
				if($radio.prop("checked")==true){
					$(this).find("ul").show().parent().siblings().find("ul").hide()
				}
			})
			
			var cookies = document.cookie;
			var cookieSub = cookies.split("; ");
			var arr = [];
			var num = 0;
			for(var i = 0; i < cookieSub.length; i++){
				var cook = cookieSub[i].split("=");
				var name = cook[0].split("");
				console.log(name[name.length-1]);
				if(name[name.length-1] == "b"){
					arr.push(cook[1]);
				}
			}
			$.ajax({
				type:"get",
				url:"data/gwc.json",
				success:function(data){
					var mag = data.data;
					for(var i = 0 ;i < arr.length;i++){
						var str = "";
						for(var j in mag){
							if(arr[i] == mag[j].id){
							str += '<li class="shangpin">'
							str += '<dl class="l">'
							str += '<dt class="l"><a class="btn_details" dataid="'+mag[j].id+'" href="details.html"><img src="'+mag[j].img+'"/></a></dt>'
							str += '<dd class="l"><a class="btn_details name" dataid="'+mag[j].id+'" href="details.html">'+mag[j].name+'</a></dd>'
							str += '</dl>'
							str += '<div class="l rig">'
							str += '<p class="p1 l">'+getCookie("num"+mag[j].id)+'</p>'
							str += '<p class="p2 l">'+mag[j].price+'</p>'
							str+='<p class="p3 l">'+mag[j].price*getCookie("num"+mag[j].id)+'</p>'
							str += '</div>'
							str += '</li>';
							}
						}
						$("#content .content_down .san div.three .a1").append(str);
					}
				}
			});
			$("#content .content_down .allmoney p span").html(getCookie("allprice"))
		})
		</script>
		
		
		<div id="footer">
			<div class="bottom">
				<div class="bottom-bottom">
					
				</div>
			</div>
		</div>
		<script>
			$("#footer .bottom .bottom-bottom").load("bottom-bottom.html");
		</script>
	</body>
</html>
